In  The  Good  Old  Days 


• A user  would  take  some  action  like  a click  on  a link  or  button 

• The  Browser  would  make  a TCP/IP  conection  to  the  web  server 

• The  browser  would  send  a POST  or  GET  request 

• The  Server  would  send  back  a page  to  display  to  the  user 

• Repeat... 
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Server 


XMLHttpRequest 

• In  2000,  Microsoft  wanted  to  move  some  of  the  processing  of  web 
pages  from  the  web  server  to  the  web  browser 

• The  idea  was  instead  of  sending  whole  pages  of  HTML  to  the 
browser,  instead  send  out  the  data  to  be  displayed  in  XML  and  then 
produce  presentation  in  Javascript  in  the  browser 

• Originally  a Microsoft  innovation  - other  browsers  soon  adopted  the 
idea  and  it  became  a defacto  standard  with  a little  variation  between 
browsers  :) 

• It  soon  became  clear  that  this  could  send  *anything*  - not  just  XML 
back  and  forth  between  a browser  and  client 
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Server 


Ajax  Arms  Race 


• The  race  was  on  to  build  better  and  better  web  sites  that  began  to 
replace  things  like  frames  and  full-screen  updates  with  XHtmIRequest 
operations  and  very  selective  screen  updates. 

• With  clever  Javascript  programmers  - the  impossible  became  possible 
- drag  and  drop,  automatic  field  completion  - automatic  data  saving.  It 
made  the  web  operate  much  more  like  the  desktop. 

• Applications  like  GMail  and  Google  Maps  - feel  very  un-web. 


Ajax  versus  Request/Response 


• Standard  Request/Response 

• Each  click  presents  a whole  new  screen 

• Ajax 

• Each  click  sends  data  and  receives  results  in  the  background. 

• The  browser  typically  gets  back  a fragment  of  HTML  which  is  used 
to  update  a portion  of  the  screen  using  the  browser  document 
model 


<a  href="#" 

onclick="document.getElementByld('stuff).innerHTML  = ,BACK,;">BACK</a> 

<a  href="#" 

onclick="document.getElementByld('stuff).innerHTML  = 'FORTH';n>FORTH</a> 

</p> 

<P> 

Hello  <b><span  id="stuff'>Stuff</span></b>  there. 

</p> 

BACK  FORTH 

Updating  the 

Hello  Stuff  there. 

Browser  Document 

BACK  FORTH  BACK  F0RTH 

This  is  why  you  can  only  have  one 

Hello  BACK  there.  HcUo  FORTH  thcrc- 

id  per  document. 

Lots  of  Flexibility 


• When  you  combine  the  ability  to  rewrite  the  Browser  document 
model  with  the  ability  to  interact  with  the  web  server  from  Javascript 
- there  is  lots  of  potential  fun 

• Different  browsers  did  things  a *little*  differently  - this  led  to  the  rise 
of  Ajax  Libraries 


Ajax  Libraries 


• Prototype  - Basic  portability  and  common  functionality 

• http://www.prototypejs.org/ 

• Script.aculo.us -Animation  and  effects 

• http://script.aculo.us/ 

• Jquery  - General  purpose  - http://jquery.com/ 

• Google  Web  Toolkit  - http://code.google.com/webtoolkit/ 


Updating  your  page  dynamically  with  Ajax. updater 

Developers  often  want  to  make  Ajax  requests  to  receive  HTML  fragments  that  update 
parts  of  the  document.  With  Ajax. Request  with  an  onComplete  callback  this  is  fairly 
easy,  but  with  Ajax. Updater  it's  even  easier! 

Suppose  you  have  this  code  in  your  HTML  document: 

<h2>0ur  fantastic  products</h2> 

<div  id="products">(fetching  produ^xii-St  . ..)</div> 

The  'products'  container  is  empty  and  you  want  to  fill  it  with  HTML  returned  from  an  Ajax 
response.  No  problem: 

new  Ajax. UpdaterC' products' , '/some_url',  { method:  'get'  }); 


http://www.prototypejs.org/learn/introduction-to-ajax 


Ajax  on  Rails 


• Ruby  on  Rails  uses  Prototype  and  Script.aculo.us 

• It  is  tightly  integrated  into  Rails  - makes  it  even  easier 

• Using  Ajax  in  Rails  is  very  similar  to  just  using  Rails  - as  much  is  done 
for  you  as  possible 


<%  form_remote_for  :umap,  @user,  :update=> 
'main-content',  :url  =>  { :action  =>  "add"  } do  |f|  %> 


<p>Name: 

<%=  f.text_field  :name  %>  </p> 
<p>Login: 

<%=  f.text_field  .-login  %>  </p> 
<p>Password: 

<%=  f.password_field  password  %>  </p> 
<p>Email: 

<%=  f.text_field  :email  %>  </p> 

<%=  submit_tag  "Create"  %> 

<%=  submit_tag  "Cancel"  %> 

<%  end  %> 


What  is  different  between  the 
normal  and  Ajax-enabled  views? 


<%  form_for  :umap,  @user,  :url  =>  { :action  => 
"adduser"  } do  |f|  %> 

<p>Name: 

<%=  f.text_field  :name  %>  </p> 

<p>Login: 

<%=  f.text_field  .-login  %>  </p> 

<p>Password: 

<%=  f.password_field  password  %>  </p> 
<p>Email: 

<%=  f.text_field  :email  %>  </p> 

<%=  submit_tag  "Create"  %> 

<%=  submit_tag  "Cancel"  %> 

<%  end  %> 


<%  form_remote_for  :umap,  @user,  :update= 

■> 

'main-content',  :url  =>  { :action  =>  "add"  } do  |f|  %> 
<p>Name: 

<%-  f.text_field  :name  %>  </p> 

<p>Login: 

<%=  f.text_field  :login  %>  </p> 

<p>Password: 

<%  form_for  :umap,  @user,  :url  =>  { :action  => 

<%=  f.password_field  password  %>  </p> 

"adduser"  } do  |f|  %> 

<p>Email: 

<p>Name: 

<%=  f.text_field  :email  %>  </p> 

<%-  f.text_field  :name  %>  </p> 

<%=  submit_tag  "Create"  %> 

<p>Login: 

<%=  submit_tag  "Cancel"  %> 

<%=  f.text_field  :login  %>  </p> 

<%  end  %> 

<p>Password: 

<%=  f.password_field  password  %>  </p> 
<p>Email: 

<%=  f.text_field  :email  %>  </p> 

<%=  submit_tag  "Create"  %> 

<%=  submit_tag  "Cancel"  %> 

<%  end  %> 

<form  action=7authn/adduser"  method="post"> 

<p>Name: 

<input  id="umap_name"  name="umap[name]"  size="30"  type="text"  />  </p> 

<p>Login: 

<input  id="umap_login"  name="umap[login]"  size="30"  type="text"  />  </p> 

<p>  Password: 

<input  id="umap_password"  name="umap[password]"  size="30"  type="password"  />  </p> 
<p>Email: 

<input  id="umap_email"  name="umap[email]"  size="30"  type="text"  />  </p> 

<input  name="commit"  type="submit"  value="Create"  /> 

<input  name="commit"  type="submit"  value="Cancel"  /> 

</form> 


Normal  Form  Source  Code 


Text 

<form  action="/users/add"  method="post"  onsubmit="new  Ajax.Updater('main-content',  7 
users/add',  {asynchronousrtrue,  evalScriptsrtrue,  parameters:Form.serialize(this)});  return  false;"> 
<p>Name: 

<input  id="umap_name"  name="umap[name]"  size="30"  type="text"  />  </p> 

<p>  Login: 

<input  id="umap_login"  name="umap[login]"  size="30"  type="text"  />  </p> 

<p>Password: 

<input  id="umap_password"  name="umap[password]"  size="30"  type="password"  />  </p> 
<p>Email: 

<input  id="umap_email"  name="umap[email]"  size="30"  type="text"  />  </p> 

<input  name="commit"  type="submit"  value="Create"  /> 

<input  name="commit"  type="submit"  value="Cancel"  /> 

</form> 


Form  Source  Code  Using  Ajax  through  Prototype 


<%=  link_to_remote  'View',  :update=>  'main-content', 

:url  =>  { .-action  =>  'view',  :id  =>  user  } %>  / 

<%=  link_to_remote  'Delete',  :update=>  'main-content', 

:url=>  { .-action  =>  'delete',  :id  =>  user  }, 

.-confirm  =>  'Are  you  sure?',  .-method  =>  .-post  %> 

<%=  link_to_remote  'Add  Account',  :update=>  'main-content', 
:url  =>  { .-action  =>  'add'  } %> 

<%=  link_to_remote  'Sites',  :update=>  'main-content', 

:url  =>  { .-action  =>  'ajaxstart',  :controller=>'sites'  } %> 


http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper.htm  l#M00053  3 


<div  id="topnav"> 


views/portal/index.rhtml 


<%=  link_to_remote  'Users',  :update=>  'main-content', 

:url  =>  { raction  =>  'ajaxstart',  :controller=>'users'  } %> 

<%-  link_to_remote  'Sites',  :update=>  'main-content', 

:url  =>  { :action  =>  'ajaxstart',  :controller=>'sites'  } %> 

<%-  link_to_remote  'Comments',  :update=>  'right-content', 

:url  =>  { :action  =>  'ajaxstart',  :controller=>'comments'  } %> 
</div> 


<div  id="main-content"> 
Welcome  to... 

</div> 


Personal  Learning  and  Reflection  Environment 

< 

C 

+ 

( + http://localhost:3000/portal 

"(A'  Google 

CP 

CT  local  U- 

Mt  s:8080  Jira  1:3000  src  Gmail 

Personal  Learning  Environment  (9.0)  You  are  logged  in  as  csev  (logout) 


link_to_remote 
outside  the  div 


Users  Sites  Comments  (Deprecated:  Framework ) 


Welcome  to  the  main  portal 

Dlick  the  links  above  to  have  some  real  fun  with 
\jax! 

Assignment  9 for  SI539 


This  might  be  a place 
where  a sweet  voting 
to  comment  or 
reflection  thing  might 
just  one  day  show 
up. 


//. 


Assignment  9 - SI539 

■<  | ► | | <5  | | R-i|  | + | 0 http://localhost:3000/one/chat  © * Q,-  entropy 

DP  H CT  Tw  Tz  U-Mv  Ant  shal  18k  13k  dr  Cm  Cc  src  Jira  Try  Python  » 


elcome  to  SI539 


About 

Contact 

Pictures 

Membership 

Chat 

Application 


Real-Time  Chat 

Assignment  9 - SI539 

◄ (5  R-;  + 0 http://localhost:3000/one/chat  ©-  Q.*  entropy 

DP  H CT  Tw  Tz  U-Mv  Ant  shal  18k  13k  dr  Cm  Cc  src  Jira  Try  Python  » 

Loading 


elcome  to  SI539 


• About 

• Contact 

• Pictures 

• Membership 

• Chat 

• Application 


Real-Time  Chat 


( Send  ) 


Hi  from  Firefox  25  Mar  2008  8:00PM 


Hello  there  25  Mar  2008  7:59PM 


Now  the  text  box  is  a bit  wider.  25  Mar  2008  7:54PM 


Hello  from  Safari  25  Mar  2008  7:51  PM 
Hi  from  Firefox  25  Mar  2008  7:51  PM 


<h2>Real-Time  Chat</h2> 

<P> 

<!--  http://api.rubyonrails.org/classes/ActionView/Helpers/Protot/peHelper.html  — > 
<%  form_remote_tag  :url  =>  'chatcontent',  :update  =>  chatdiv'  do  -%> 

<input  type="text"  size="60"  name="chatmsg"/> 

<%=  submit_tag  'Send'  %> 

<%  end  %> 

</p> 

<!—  http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper.html  — > 
<%=  periodically_call_remote(:url  =>  'chatcontent', 
frequency  =>  '3',  :update  =>  'chatdiv')  %> 

<div  id="chatdiv"> 

<%=  image_tag  "ajax-loading.gif  %> 

Loading  ... 

</div> 


<h2>Real-Time  Chat</h2> 

<p><form  action="chatcontent"  method="post"  onsubmit="new 
Ajax.Updater('chatdiv',  'chatcontent',  {asynchronous:true,  evalScripts:true, 
parameters:Form.serialize(this)});  return  false;">  <input  type="text"  size="60" 
name="chatmsg,7> 

<input  name="commit"  type="submit"  value="Send"  /> 

</form></p> 

<script  type="text/javascript"> 

//<![CDATA[ 

new  PeriodicalExecuter(function()  {new  Ajax.Updater('chatcontent',  'chatdiv', 
{asynchronous:true,  evalScripts:true})},  30) 

//]]> 

</script> 

<div  id="chatdiv"> 

<img  alt="Ajax-loading"  src=7images/ajax-loading.gif?  1 206489556"  /> 

Loading  ... 

</div> 


def  chatcontent 

if  request.post?  and  params[:chatmsg]  !=  nil 
logger.info  "Chat" 
ch  = Chat.new 

ch.chatmsg  = params[:chatmsg] 
ch.save 
end 

@chats  = C h at.fi  nd  (rail,  :order  =>  "chats.created_at  DESC", 
.‘limit  =>  5) 

logger.info  "We  found  #{@chats.size}  chats" 
render  :action  =>  'chatcontent',  .‘layout  =>  false 
end 


http://localhost:3000/one/chatcontent 


<p  class="chattext"> 

<span  class="chatdate"> 

25  Mar  2008  I 1 :50PM</span> 

</p> 

<p  class="chattext">Hi  from  Firefox 
<span  class="chatdate"> 

25  Mar  2008  8:00PM</span> 

</p> 

<p  class="chattext">Hello  there 
<span  class="chatdate"> 

25  Mar  2008  7:59PM</span> 

</p> 


Assignment  9 - SIS39 


<S  R;;  + ' ^ http://localhost:3000/one/chat 


O - Q*  entropy 
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elcome  to  SI539 


About 
Contact 
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Chat 

Application 


Real-Time  Chat 


Send 


Hi  from  Firefox  25  Mar  2008  8:00PM 

Hello  there  25  Mar  2008  7:59PM 

Now  the  text  box  is  a bit  wider.  25  Mar  2008  7:54PM 

Hello  from  Safari  25  Mar  2008  7:51  PM 

Hi  from  Firefox  25  Mar  2008  7:51PM 


class  CreateChats  < ActiveRecord::Migration 
def  self.up 

create_table  :chats  do  |t| 
t.column  :chatmsg,  :string 
t.column  :member_id,  rinteger 
t.column  :created_at,  :datetime 
end 
end 


def  self.down 
drop_table  :chats 
end 


Convention  - this  field  is 
handled  by  Rails. 


<%  for  chat  in  @chats  %> 

<p  class="chattext"><%=  chat.chatmsg  %> 

<span  class="chatdate"> 

<%=  chat.created_at.strftime("%e  %b  %Y  %l:%M%p")  %> 
</span> 

</p> 

<%  end  %> 


http://localhost:3000/one/chatcontent 


<p  class="chattext"> 

<span  class="chatdate"> 

25  Mar  2008  I 1 :50PM</span> 

</p> 

<p  class="chattext">Hi  from  Firefox 
<span  class="chatdate"> 

25  Mar  2008  8:00PM</span> 

</p> 

<p  class="chattext">Hello  there 
<span  class="chatdate"> 

25  Mar  2008  7:59PM</span> 

</p> 


Assignment  9 - SIS39 


<S  R;;  + ' ^ http://localhost:3000/one/chat 


O - Q*  entropy 


CQ  H CT  Tw  T2  U-Mt  Ant  shal  18k  13k  dr  Cm  Cc  src  Jira  Try  Python 


elcome  to  SI539 


About 
Contact 
Pictures 
Membershipi 

Chat 

Application 


Real-Time  Chat 


Send 


Hi  from  Firefox  25  Mar  2008  8:00PM 

Hello  there  25  Mar  2008  7:59PM 

Now  the  text  box  is  a bit  wider.  25  Mar  2008  7:54PM 

Hello  from  Safari  25  Mar  2008  7:51  PM 

Hi  from  Firefox  25  Mar  2008  7:51PM 


<h2>Real-Time  Chat</h2> 

<P> 

<!--  http://api.rubyonrails.org/classes/ActionView/Helpers/Protot/peHelper.html  — > 
<%  form_remote_tag  :url  =>  'chatcontent',  :update  =>  chatdiv'  do  -%> 

<input  type="text"  size="60"  name="chatmsg"/> 

<%=  submit_tag  'Send'  %> 

<%  end  %> 

</p> 

<!—  http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper.html  — > 
<%=  periodically_call_remote(:url  =>  'chatcontent', 
frequency  =>  '3',  :update  =>  'chatdiv')  %> 

<div  id="chatdiv"> 

<%=  image_tag  "ajax-loading.gif  %> 

Loading  ... 

</div> 


In  Place  Editing 


• This  is  nifty  - you  can  do  editing  live 
- as  the  fields  are  changed  the 
database  is  updated. 


flickr 

Home  You  ▼ Organize  Contacts  ^ Groups  * Explore 


photo.jpg 


[-1  ADO  SEND  TO  f-  ADD  rri  BLOG  ALL  PRINTS  prtTftTc 

NOTE  >W  GROUP  J TOSET  THIS  SIZES  " $ MORE  ' 


Myths  and  Realities  of 
Working  for  a Nonprofit 
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Member  Detail 


Name: 

Dr.  Chuck 
Email: 

csev@uich.edu 


Welcome  to  SI539 


• About 

• Contact 

• Pictures 

• Membership 

• Chat 

• Application 


Member  Detail 


Name: 

Dr.  Chuck 


Welcome  to  SI539 


Email: 

csev@uich.edu 


• About 

• Contact 

• Pictures 

• Membership 

• Chat 

• Application 


Member  Detail 


Name: 


Dr.  Chuck  Severance  ^ ok  ^ Cancel 


Lots  of  Ajax  in 
the  background. 


Email:  ■ 

csev@ui) 


elcome  to  SI539 


• About 

• Contact 

• Pictures 

• Membership 

• Chat 

• Application 


Member  Detail 


Name: 

Dr.  Chuck  Severance 


Email: 


csev@uich.edu 


<%=  in place editor field  "member",  "name",  {},  { 

:load_text_url  =>  url_fo reaction  =>  "get_member_name",  :id  =>@member) 

}%> 


def  view 

@member  = Member.find(params[:id]) 
end 


Welcome  to  SI539 


• About 

• Contact 

• Pictures 

• Membership 
■ Chat 

• Application 


Member  Detail 


Name: 


Dr.  Chuck 


Email: 


csev@uich.edu 


<%=  in place editor field  "member",  "name",  {},  { 

:load_text_url  =>  url_for(:action  =>  "get_member_name",  :id  =>@member) 

}%> 


<span  class="in_place_editor_field"  id="member_name_ I _in_place_editor"> 
Chuck  S</span><script  type="text/javascript"> 

//<![CDATA[ 

new  Ajax.lnPlaceEditor('member_name_  I _in_place_editor', 
7one/set_member_name/ 1 f,  {loadTextURL:7one/get_member_name/ 1 '}) 

//]]> 

</script> 

</span> 


views/one/view.rhtml 


<%=  in_place_editor_field  "member",  "name",  {},  { 

:load_text_url  =>  url_for(:action  =>  "get_member_name",  rid  =>@member) 

}%> 


def  get_member_name  

item  = Member.find(params[:id]) 
render  :text  =>  item.name.to_s 
end 


Welcome  to  SI539 


• About 

• Contact 

• Pictures 

• Membership 

• Chat 


Member  Detail 


Name: 


Dr.  Chuck 


GiT  cancel 


Email: 


csev@uich.edu 


one  controller.rb 


def  get_member_name 
item  = Member.find(params[:id]) 
render  :text  =>  item.name.to_s 
end 


http: //local  host:  3000/one/get_member_name/l 


* ► 

c 

R-'J 

+ 

* * http://localhost:3000/one/get_member_name/l 

r. 


Q-  Google 


Dr.  Chuck  Severance 


PQ  H CT  Tw  Tz  U-Mt  Ant  shal  18k  13k  dr  Cm 


elcome  to  SI539 


Member  Detail 


• About 

• Contact 

• Pictures 
^ershi 

• Chat*^ 

• Application 


Name: 


Dr.  Chuck 


^cancel 


Email: 

csev@uich.edu 


Member  Detail 


:t 

:s 

irship 

ation 


Name: 


one  controller.rb 


Dr.  Chuck  Severance 

Email: 

csev@uich.edu 


Co iT  cancel 


def  set_member_name 
item  = Member.find(params[:id]) 
item.update_attribute(:email,  params[:value]) 
render  :text  =>  item.email.to  s 
end 


felcome  to  SI539 


The  moment  you  press  “OK”,  a post  is  sent  to 
the  set_member_name  method  with  the 
members’s  id  and  the  new  field  value  from  the 
form.  The  database  is  immediately  updated  and 
the  new  text  is  returned  to  the  form. 


• About 

• Contact 

• Pictures 

• Membership 

• Chat 

• Application 


Member  Detail 


Name: 

Dr.  Chuck  Severance 


Email: 


csev@uich.edu 


user  controller.rb 


in_place_edit_for  :member,  :name 
def  set_member_email 

logger.info  "Doing  set_mennber_ennail  manually" 
item  = Member.find(params[:id]) 
item.update_attribute(:email,  params[:value]) 
render  :text  =>  item.email.to_s 
end 

def  get_member_name 
item  = Member.find(params[:id]) 
render  :text  =>  item.name.to_s 
end 

def  get_member_email 
item  = Member.find(params[:id]) 
render  :text  =>  item.email.to_s 
end 


No  shortcut  for 
getters.  Hmmm. 

Kind  ofWET 
(not-DRY) 


Accessibility  with  Ajax 


• It  is  not  perfect 

• Needs  further  study 

• Lots  of  investment  going  on 

• Fluid  Project  - Univ. Toronto 
• http://www.fluidproject.org/ 


Home 

About  Fluid 
News 

Get  Involved 
Partners 

Technical  Information 
User  Experience 
Meetings 


What  is  Fluid? 

Fluid  is  a worldwide 
collaborative  project 
to  help  improve  the 
usability  and 
accessibility  of 
community  open 
source  projects  with 


Community  Resources 

• Fluid  Wiki:  collaborative 
documentation,  technical 
architecture  information, 
and  user  experience 
material  for  the  Fluid 
Project. 

• Fluid  Blog:  learn  more 
about  the  progress  of 
Fluid  directly  from 


Summary 


• By  using  the  Protoype  library  and  closely  integrating  it  into  Rails,  Ajax 
becomes  very  simple  in  Rails. 

• We  may  have  a whole  new  set  of  Ajax-enabled  applications  emerge  as 
a result 

• This  will  expose  new  design  issues  - users  will  see  and  learn  new  ways 
of  interacting  - there  will  be  usability  advantages  and  disadvantages. 


